<template>

  <div class="top-nav">
    <div class="nav-links">
      <RouterLink to="/home" class="nav-button">首页</RouterLink>
      <!-- <RouterLink to="/active" class="nav-button">拼写练习</RouterLink> -->
      <!-- <RouterLink to="/SelectActive" class="nav-button">选择活动</RouterLink> -->
      <!-- <RouterLink to="/Test" class="nav-button">测试练习</RouterLink> -->
      <RouterLink to="/Search" class="nav-button">单词搜索</RouterLink>
      <RouterLink to="/Composition" class="nav-button">作文练习</RouterLink>
      <RouterLink to="/NewWord" class="nav-button">新词学习</RouterLink>
      <RouterLink to="/Review" class="nav-button">复习旧词</RouterLink>
      <RouterLink to="/Forum" class="nav-button">论坛</RouterLink>
      <RouterLink to="/Mine" class="nav-button">我的</RouterLink>
      <!-- <RouterLink to="/SystemNotifications" class="nav-button">系统通知</RouterLink> -->
      <!-- <RouterLink to="/Chat" class="nav-button">liaotian</RouterLink> -->
    </div>
    <button class="logout-button" @click="logout">
      <i class="fas fa-sign-out-alt"></i> 退出登录
    </button>
  </div>

</template>


<script setup>


import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Chart, registerables } from 'chart.js';
import { LogoutUpdateLog } from "../api/authService.js";
import { ElMessage } from 'element-plus';
const router = useRouter();
const userId = localStorage.getItem("userId");

const logout = () => {
  // LogoutUpdateLog()
  if (loadGetUserData()) {
    localStorage.removeItem('token');
    router.push('/');
  }
};
const loadGetUserData = async () => {
  try {
    const res = await LogoutUpdateLog(userId);
    console.log(res, '获取用户数据');
    if (res) {

      console.log(res);
    } else {
      ElMessage.error(res.message || "退出失败");
    }
  } catch (error) {
    ElMessage.error("获取失败: ");
  } finally {
    // loading.value = false;
  }
};


</script>

<style lang="scss" scoped>
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--bg-color);

  // background: linear-gradient(135deg, #1e3c72, #2a5298);
  box-shadow: 0 0.15rem 0.75rem 0 var(--shadow-color);

  .nav-links {
    display: flex;
    gap: 1rem;
  }

  .nav-button {
    padding: 0.5rem 1rem;
    // color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 0.35rem;
    transition: all 0.3s;
    color: var(--text-color);

    &:hover {
      color: var(--card-bg);
      background: rgba(0, 0, 0, 0.2);
    }
  }

  .logout-button {
    padding: 0.5rem 1rem;
    background: #126268;
    color: white;
    border: none;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #be2617;
    }
  }
}
</style>